<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<div id="app"></div>
<script>
  /** app.innerHTML = proxyInstance*/
  /** case1: obj*/
  /*const o = {a: 1, b: 2};
  const p = new Proxy(o, {
    get(target, key) {
      console.log('target:',target,'key:',key);

      return target[key]
    }
  });
  app.innerHTML = p
  /!*
    target: {a: 1, b: 2} key: Symbol(Symbol.toPrimitive)
    target: {a: 1, b: 2} key: toString
    target: {a: 1, b: 2} key: Symbol(Symbol.toStringTag)
  *!/*/

  // const x = new WeakMap()
  // x.set(Symbol(Symbol.toPrimitive),{a:1,b:2}) //报错: Uncaught TypeError: Cannot convert a Symbol value to a string
  // console.log(x.get(Symbol(Symbol.toPrimitive)));

  /** case2: arr*/
  const o = [1,2,3];
  const p = new Proxy(o, {
    get(target, key) {
      console.log('target:',target,'key:',key);

      return target[key]
    }
  });
  app.innerHTML = p
/*
target: (3)[1, 2, 3] key: Symbol(Symbol.toPrimitive)
target: (3)[1, 2, 3] key: toString
target: (3)[1, 2, 3] key: join
target: (3)[1, 2, 3] key: length
target: (3)[1, 2, 3] key: 0
target: (3)[1, 2, 3] key: 1
target: (3)[1, 2, 3] key: 2
*/
</script>
</body>
</html>
